<template>
  <div style="height: 100%;width: 100%;overflow-x: auto;overflow-y: auto">
    <el-dialog width="50%" style="text-align: left;padding: 2%;color:rgb(240,240,240);" append-to-body
               :before-close="handleClose"
               :visible="dialogVisible" title="结合面摩擦系数">
      <img :src="url3" style="width: 100%;height: 80%">
      <span slot="footer" class="dialog-footer">
              </span>
    </el-dialog>
    <div style="width: 75%;height: 85%;float: left" class="box">
      <div class="bend_head">输入参数</div>
      <div style="width: 96%;height: 90%;float: left" class="box">
        <div class="bend_head">螺栓/螺钉和夹紧件参数</div>
        <div style="float: left;width: 50%;height: 91%;padding: 2%">
          <div class="tend">
            <input class="bend_input" v-model="form.MA_input">
            <span class="text">拧紧力矩(Nmm)</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.aA">
            <span class="text">拧紧系数</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.dh">
            <span class="text">夹紧件孔径(mm)</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.dha">
            <span class="text">夹紧件孔倒角直径(mm)</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.P">
            <span class="text">螺距(mm)</span>
          </div>
          <div class="tend">
            <button class="but" @click="open(11)" style="float: right;">!</button>
            <input class="bend_input" v-model="form.uG" style="width: 10.7%">
            <span class="text">螺纹副摩擦系数</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.uK">
            <span class="text">支承面摩擦系数</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.hs">
            <span class="text">垫片厚度(mm)</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.db">
            <span class="text">螺杆内径(mm)</span>
          </div>
          <div class="tend">
            <button class="but" @click="open(12)" style="float: right;">!</button>
            <input class="bend_input" v-model="form.d0" style="width: 10.7%">
            <span class="text">螺杆最小直径(mm)</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.l_Gew">
            <span class="text">螺杆自由螺纹长度(mm)</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.E_p">
            <span class="text">夹紧件弹性模量(MPa)</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.h1">
            <span class="text">上部夹紧件厚度(mm)</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.h2">
            <span class="text">下部夹紧件厚度(mm)</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.Rz_inter">
            <span class="text">夹紧件表面粗糙度Rz(um)</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.Rz_support">
            <span class="text">支承表面粗糙度Rz(um)</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.pG">
            <span class="text">夹紧件许用压应力(MPa)</span>
          </div>
          <div class="tend">
            <button class="but" @click="open(13)" style="float: right;">!</button>
            <select class="bend_input" v-model="form.clamp_type" style="width: 10.7%">
              <option class="u365_input_option" value=1>盘形夹紧件</option>
              <option class="u365_input_option" value=2>圆柱形夹紧件</option>
              <option class="u365_input_option" value=3>方形夹紧件</option>
              <option class="u365_input_option" value=4>圆环形夹紧件</option>
            </select>
            <span class="text">夹紧件类型</span>
          </div>
          <div class="tend">
            <button class="but" @click="open(14)" style="float: right;">!</button>
            <input class="bend_input" style="width: 10.7%" v-model="form.D_A1">
            <span class="text">结合面上替代外径DA'(mm)</span>
          </div>

        </div>
        <div style="float: left;width: 50%;height: 91%">
          <div class="tend2" style="margin-top: 4%;">
            <span class="text" style="float: left;width: 20%;text-align: right;margin-right: 1%;">连接类型</span>
            <select class="bend_input" v-model="form.joint_type" style="float: left">
              <option class="u365_input_option" value=1>螺栓连接</option>
              <option class="u365_input_option" value=2>螺钉连接</option>
            </select>
            <span class="text" style="float: left;width: 20%;text-align: right;margin-right: 1%;">螺旋头类型</span>
            <select class="bend_input" v-model="form.bolt_type" style="float: left">
              <option class="u365_input_option" value=1>外六角螺旋</option>
              <option class="u365_input_option" value=2>内六角螺旋</option>
            </select>
          </div>
          <div class="tend2">
            <div class="text-3"></div>
            <div class="text-3" style="text-align: center">螺栓/螺钉</div>
            <div class="text-3" style="text-align: center;margin-right: 0;">螺母/内螺纹</div>
          </div>
          <div class="tend2">
            <div class="text-3">公称直径(mm)</div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.d">
            </div>
            <div class="text-3">
            </div>
          </div>
          <div class="tend2">
            <div class="text-3">支承面外径(mm)</div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.dw">
            </div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.s" style="width: 66%">
              <button class="but" @click="open(17)" style="float: right;width: 20%" >!</button>
            </div>
          </div>
          <div class="tend2">
            <div class="text-3">小径(mm)</div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.d3">
            </div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.D1">
            </div>
          </div>
          <div class="tend2">
            <div class="text-3">中径(mm)</div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.d2">
            </div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.D2">
            </div>
          </div>
          <div class="tend2">
            <div class="text-3">支承面内径</div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.da">
            </div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.Da" style="width: 66%">
              <button class="but" @click="open(18)" style="float: right;width: 20%" >!</button>
            </div>
          </div>
          <div class="tend2">
            <div class="text-3" style="width: 50%;text-align: right">夹紧件是否承受轴向载荷</div>
            <div class="text-3" style="width: 40%;">
              <select class="bend_input" v-model="form.FA_action" style="float: left;width: 25%">
                <option class="u365_input_option" value=1>是</option>
                <option class="u365_input_option" value=2>否</option>
              </select>
            </div>
          </div>
          <div class="tend2">
            <div class="text-3" style="width: 50%;text-align: right">夹紧件是否承受扭矩载荷</div>
            <div class="text-3" style="width: 40%;">
              <select class="bend_input" v-model="form.MY_action" style="float: left;width: 25%">
                <option class="u365_input_option" value=1>是</option>
                <option class="u365_input_option" value=2>否</option>
              </select>
            </div>
          </div>
          <div class="tend2">
            <div class="text-3" style="width: 50%;text-align: right">传递载荷接触面数目</div>
            <div class="text-3" style="width: 40%;">
              <input class="bend_input2" style="width: 25%;float: left" v-model="form.q">
            </div>
          </div>
          <div class="tend2">
            <div class="text-3" style="text-align: center">螺旋段数</div>
            <div class="text-3" style="text-align: center">
              长度(mm)
            </div>
            <div class="text-3" style="text-align: center">
              直径(mm)
            </div>
          </div>
          <div class="tend2">
            <div class="text-3" style="text-align: center;">1</div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.a102">
            </div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.a106">
            </div>
          </div>
          <div class="tend2">
            <div class="text-3" style="text-align: center">2</div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.a103">
            </div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.a107">
            </div>
          </div>
          <div class="tend2">
            <div class="text-3" style="text-align: center">3</div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.a104">
            </div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.a108">
            </div>
          </div>
          <div class="tend2">
            <div class="text-3" style="text-align: center">4</div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.a105">
            </div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.a109">
            </div>
          </div>
          <div class="tend2">
            <div class="text-3"></div>
            <div class="text-3" style="text-align: center">螺栓/螺钉</div>
            <div class="text-3" style="text-align: center;margin-right: 0;">螺母/内螺纹</div>
          </div>
          <div class="tend2">
            <div class="text-3">屈服强度(MPa)</div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.Rp">
            </div>
            <div class="text-3">
            </div>
          </div>
          <div class="tend2">
            <div class="text-3">抗拉强度(MPa)</div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.RmS">
            </div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.RmM">
            </div>
          </div>
          <div class="tend2">
            <div class="text-3">剪切强度(MPa)</div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.tB" style="width: 66%">
              <button class="but" @click="open(19)" style="float: right;width: 20%" >!</button>
            </div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.tBM" style="width: 66%">
              <button class="but" @click="open(19)" style="float: right;width: 20%" >!</button>
            </div>
          </div>
          <div class="tend2">
            <div class="text-3">弹性模量(MPa)</div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.E_s">
            </div>
            <div class="text-3">
              <input class="bend_input2" v-model="form.E_M">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 20%;height: 70%;float: left" class="box">
      <div class="bend_head">输出参数</div>
      <div class="tend">
        <span class="sout">实际配置最大预紧力(N)</span>
        <span class="sout_end">{{ res.FM_zul }}</span>
      </div>
      <div class="tend">
        <span class="sout">实际配置最小预紧力(N)</span>
        <span class="sout_end">{{ res.FM_zul_min }}</span>
      </div>
      <div class="tend">
        <span class="sout">利用系数</span>
        <span class="sout_end">{{ res.v_zul }}</span>
      </div>
      <div class="tend">
        <span class="sout">预紧力改变量(N)</span>
        <span class="sout_end">{{ res.FZ }}</span>
      </div>
      <div class="tend">
        <span class="sout">工作状态最大预紧力(N)</span>
        <span class="sout_end">{{ res.FM_work }}</span>
      </div>
      <div class="tend">
        <span class="sout">工作状态最小预紧力(N)</span>
        <span class="sout_end">{{ res.FM_work_min }}</span>
      </div>
      <div class="tend">
        <span class="sout">装配压应力安全系数</span>
        <span class="sout_end">{{ res.Sp_M }}</span>
      </div>
      <div class="tend">
        <span class="sout">最小结合螺纹长度(mm)</span>
        <span class="sout_end">{{ res.meff_min }}</span>
      </div>
      <div class="tend">
        <span class="sout">变形锥最大外径(mm)</span>
        <span class="sout_end">{{ res.D_AGr }}</span>
      </div>
      <div class="tend">
        <span class="sout">接合面极限尺寸(mm)</span>
        <span class="sout_end">{{ res.G }}</span>
      </div>
      <div class="tend">
        <span class="sout">螺杆轴向柔度(mm/N)</span>
        <span class="sout_end">{{ res.delta_s }}</span>
      </div>
      <div class="tend">
        <span class="sout">夹紧件轴向柔度(mm/N)</span>
        <span class="sout_end">{{ res.delta_P }}</span>
      </div>
    </div>
    <button class="compute" @click="submit1">计算</button>
  </div>
</template>

<script>
import {namebolt_preload_1} from "@/api/file";

export default {
  name: "namebolt_preload_1",
  created () {
    document.title = '螺栓预紧力计算' //模块中文名
    this.$store.state.file.key = 43 //设置key为自己的页面编号
  },
  data() {
    return {
      dialogVisible: false,
      url3: require("/src/assets/image/image_43_11.png"),
      //输出参数
      res: {
        FM_zul:'Static Text',//实际装配最大预紧力 (N)
        FM_zul_min:'Static Text',//实际装配最小预紧力 (N)
        v_zul:'Static Text',//利用系数
        FZ:'Static Text',//预紧力改变量 (N)
        FM_work:'Static Text',//工作状态最大预紧力 (N)
        FM_work_min:'Static Text',//工作状态最小预紧力 (N)
        Sp_M:'Static Text',//装配压应力安全系数
        meff_min:'Static Text',//最小结合螺纹长度(mm)
        D_AGr:'Static Text',//变形锥最大外径(mm)
        delta_s:'Static Text',//螺杆轴向柔度(mm/N)
        delta_P:'Static Text',//夹紧件轴向柔度(mm/N)
        G:'Static Text',//结合面极限尺寸(mm)
      },
      // 返回结果数组
      output:[],
      form:this.$store.state.file.dataList[43],
    }
  },
  methods: {
    handleClose(){
      this.dialogVisible=false
    },
    open(id) {
      console.log(id)
      this.url3 = require("/src/assets/image/image_43_" + id + ".png");
      this.dialogVisible = true
    },
    submit1() {
      namebolt_preload_1(this.form)
          .then(res => {
            console.log(res);
            this.output=res;
            this.replac();
          })
          .catch(error => {
            console.log(error);
          });
    },
    replac(){
      this.res.FM_zul=this.output[0],//实际装配最大预紧力 (N)
          this.res.FM_zul_min=this.output[1],//实际装配最小预紧力 (N)
          this.res.v_zul=this.output[2],//利用系数
          this.res.FZ=this.output[3],//预紧力改变量 (N)
          this.res.FM_work=this.output[4],//工作状态最大预紧力 (N)
          this.res.FM_work_min=this.output[5],//工作状态最小预紧力 (N)
          this.res.Sp_M=this.output[6],//装配压应力安全系数
          this.res.meff_min=this.output[7],//最小结合螺纹长度(mm)
          this.res.D_AGr=this.output[8],//变形锥最大外径(mm)
          this.res.delta_s=this.output[9],//螺杆轴向柔度(mm/N)
          this.res.delta_P=this.output[10],//夹紧件轴向柔度(mm/N)
          this.res.G=this.output[11]//结合面极限尺寸(mm)
    }
  }
}
</script>

<style scoped>
* {
  overflow: hidden;
}
input{
  border: 1px solid rgba(20,81,154,0.5);
}
.box {
  margin: 20px 1%;
  background: #FFFFFF;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}

.bend_head {
  width: 100%;
  /*height: 31px;*/
  font-size: 17.5px;
  background-color: #D7D7D7;
  border-radius: 3px;
  padding-left: 15px;
  font-weight: bolder;
}

.bend_input {
  float: right;
  height: 100%;
  width: 19%;
  text-align: center;
  display: block;
}

.tend {
  margin-bottom: 0.4%;
  height: 5%;
  width: 100%;
}

.tend2 {
  margin-bottom: 0.4%;
  height: 4.0%;
  width: 100%;
}

.text {
  float: right;
  margin-right: 22px;
  display: block;
  letter-spacing: 0;
  text-align: right;
  width: 50%;
  height: 100%;
}

.text-3 {
  width: 30%;
  margin-left: 3%;
  height: 100%;
  text-align: right;
  float: left;
  display: flex;
}

.bend_input2 {
  float: right;
  height: 100%;
  width: 100%;
  text-align: center;
  display: block;
}

.but {
  text-align: center;
  width: 4%;
  float: right;
  /*margin-right: 5%;*/

  background-color: #D7D7D7;
  border-radius: 4px;
  border: 2px #686868;
  height: 89%;
}

.sout {
  width: 50%;
  display: block;
  margin-left: 5%;
  margin-right: 2%;
  height: 100%;
  float: left;
  text-align: right;
}

.sout_end {
  width: 40%;
  height: 100%;
  display: block;
  float: left;
}

.compute {

  border-radius: 4px;
  border: 2px #686868;
  background: #6dd400;
  width: 10%;
  height: 29px;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  margin-left: 1%;
  float: left;
}
</style>
